<template>
  <view class="ticket-order">
    <view class="flex-between tabWrap">
      <view
        :class="active == item.key ? 'tabItem on' : 'tabItem'"
        v-for="(item, index) in tabs"
        :key="index"
        @click="changeTab(item.key)"
        >{{ item.title }}</view
      >
    </view>
    <view class="app-card" v-for="(item, index) in order_list" :key="item.id">
      <view class="flex-between">
        <view class="font700 font28">订单id:{{ item.id }}</view>
        <view
          :class="{
            'text-red': item.orderStatus == 'UNPAID',
            't-theme_1': item.orderStatus == 'PAID',
          }"
          >{{ set_pay_status(item.orderStatus) }}</view
        >
      </view>
      <view class="font24 t-8 py-1">{{ item.createTime }}</view>
      <view class="flex-between">
        <view>
          <text class="font24 mr-05">¥</text>
          <text>{{ item.payFee }}</text>
        </view>
        <!-- <view class="font24 t-8 f-b-c h24">x{{ item.number }}</view> -->
        <view
          class="bg-theme circle20 f-c-c ml-2 mini-btn"
          style="color: #fff"
          @click="foodDetail(item)"
          >查看详情</view
        >
      </view>

      <view class="mini-btns">
        <!-- <view
          class="bg-theme circle20 h64 w164 f-c-c"
          @click="get_pay(item)"
          v-if="item.orderStatus === 'UNPAID'"
          >立即支付</view
        >

        <view
          class="bg-theme circle20 h64 w164 f-c-c"
          style="color: #fff"
          @click="get_refund(item)"
          v-if="item.orderStatus === 'PAID' && !item.destroy && item.payFee"
          >退款</view
        >

        <view
          class="bg-theme circle20 h64 w164 f-c-c ml-2"
          style="color: #fff"
          @click="details(item)"
          >查看详情</view
        > -->
      </view>
    </view>
    <view
      class="w-100 t-a font24 t-4 pb-1"
      v-if="is_loading && order_list.length > 0"
      >没有更多了</view
    >
    <view class="w-100 t-a font24 t-3 pt-12 pb-1 no-data" v-else>暂无数据</view>
  </view>
</template>

<script>
import ImageFile from "@/components/img_file.vue";
import wxPay from "@/common/weixinPay.js";
import { myOrderList } from "@/api/foodPage.js";
export default {
  mixins: [wxPay],
  components: {
    ImageFile,
  },
  data() {
    return {
      active: "all",
      order_list: [],
      is_loading: false,
      query: {
        currentPage: 1,
        orderType: "FOOD",
        pageSize: 999,
        orderTypeListStr: "",
        orderStatus: "",
      },
      tabs: [
        { title: "全部", key: "all" },
        { title: "待支付", key: "UNPAID" },
        { title: "已支付", key: "PAID" },
        { title: "已完成", key: "FINISHED" },
        { title: "已退款", key: "REFUND" },
        { title: "已关闭", key: "CLOSED" },
      ],
    };
  },
  created() {
    this.get_order_list();
  },
  methods: {
    foodDetail(item) {
      uni.navigateTo({
        url: `/pages/orderPage/foodDetail?id=${item.id}`,
      });
    },
    changeTab(e) {
      console.log(e);
      this.active = e;
      this.query.orderStatus = e === "all" ? "" : e;
      this.get_order_list();
    },
    // 我的订单
    async get_order_list() {
      const orgId = uni.getStorageSync("orgId");
      if (!orgId) {
        uni.showToast({
          title: "请登录",
          icon: "none",
        });
        setTimeout(() => {
          uni.reLaunch({
            url: "/pages/login/index",
          });
        }, 1000);
        return;
      }
      const { body } = await myOrderList(this.query);
      this.order_list = !this.query.orderStatus
        ? body.records
        : [...body.records].filter(
            (v) => v.orderStatus === this.query.orderStatus
          );

      const { records, current, pages } = body;
      // 当前页大于总页 显示没有更多了
      if (current >= pages) {
        this.is_loading = true;
      } else {
        this.is_loading = false;
      }
    },
    details(val) {
      // 跳转到详情
      uni.setStorageSync("order_details", val);
      uni.navigateTo({
        url: `/pages/my/order/details?id=${val.id}`,
      });
    },
    get_refund(val) {
      uni.setStorageSync("order_refund", val);
      uni.navigateTo({
        url: `/pages/my/order/refund?id=${val.id}`,
      });
    },
    get_pay(val) {
      let data = {
        orderIdList: [val.id], // 订单id集合
        payFee: val.goodsFee, // 支付金额
        id: val.id, //outTradeNo
      };
      this.get_wx_order(data);
    },
  },
};
</script>

<style lang="scss" scoped>
.ticket-order {
  min-height: 100%;
  // padding: 26rpx;
  // padding-top: 110rpx;
  padding-right: 20rpx;
}
.ty-line-info {
  border-radius: 0 28rpx 28rpx 28rpx;
  margin-top: -32rpx;
}
.ty-circle-box {
  border-radius: 0 34rpx 34rpx 0;
}
.show-in-top {
  // box-shadow: 1rpx 0px 1rpx rgba(0,102,29,0.15) inset;
  transform: rotate(90deg);
  border-radius: 50% 0 0 50%;
}
.show-in-bottom {
  // box-shadow: 1rpx 0px 1rpx rgba(0,102,29,0.15) inset;
  transform: rotate(-90deg);
  border-radius: 50% 0 0 50%;
}
.no-data {
  height: 100%;
}
.tabWrap {
  padding: 20rpx 30rpx;
  overflow-x: auto;

  .tabItem {
    font-size: 28rpx;
    color: #666;
    height: 60rpx;
    box-sizing: border-box;
    padding: 0 20rpx;
    flex-shrink: 0;
    &.on {
      border-bottom: 2px solid $uni-color-primary;
      color: $uni-color-primary;
    }
  }
}
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}

.app-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  box-shadow: 0 0 8px 0 rgba($color: #000000, $alpha: 0.15);
  position: relative;
  margin-bottom: 20rpx;
  overflow: hidden;
}
.mini-btns {
  display: flex;
  justify-content: flex-end;
  margin-top: 10rpx;
}
.mini-btn {
  width: 140rpx;
  height: 50rpx;
  font-size: 24rpx;
}
</style>
